<template>
	<div>
		<el-dialog title="加入课程" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input v-model="ClazzByStudentId" placeholder="输入邀请码" class="input"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" style="color: #03D3BD;border: #03D3BD solid 0.0625rem;">取 消</el-button>
				<el-button type="primary" @click="addClazzByStudentId()" style="background-color: #03D3BD;color: white;border: none;">确 定</el-button>
			</span>
		</el-dialog>
		<div style="height: 3.875rem;background-color: white;border-top: 0.0625rem #f0f0f0 solid;display: flex;justify-content: space-between;">
			<div class="box">
				<div class="label">分类</div>
				<div class="item-box">
					<!-- <div class="item" style="">全部</div> -->
					<div class="item" @click="radio=1"   :class="{active:radio==1}">进行中</div>
					<div class="item" @click="radio=2" :class="{active:radio==2}">已结束</div>
				</div>
			</div>
			<div style="margin-right:10%;display: flex;justify-content: center;align-items: center;cursor: pointer;color: #00DBCF;" @click="dialogVisible=true">加入课程</div>
		</div>
		<div class="course_main">
			<div style="margin-top: 1.875rem;">
				<el-row :gutter="30">
					<el-col :span="6" v-for="(Item,index) in ClazzList" :key="index" v-show="Item.isDelete==0&&radio==1">
						<div class="grid-content" @click="CourseCenter(Item.id,Item.courseName)">
							<div class="live-course-thumb">
								<img :src="Item.courseImg" />
							</div>
							<div class="live-course-body">
								<div class="live-course-title">{{Item.courseName}}</div>
								<div class="live-course-info">老师：{{Item.techareList}}</div>
							</div>
						</div>
					</el-col>

				</el-row>
              
			</div>
		</div>
	</div>
</template>

<script>
	import {
		HttpManagerStudent
	} from "../../request/student.js"
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				dialogVisible: false,
				textarea2: '',
				ClazzByStudentId: '',
				ClazzList:[],
				radio:"1",
				TechareList:[]
			}
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			CourseCenter(id,name) {
				localStorage.setItem("ClassId",id)
				localStorage.setItem("Classname",name)
				this.$router.push("/Coursecatalogue");
			},
			creatCourse() {
				this.dialogVisible = true;
			},
			//通过班级口令加入班级
			addClazzByStudentId()
			{
				HttpManagerStudent.addClazzByStudentId(this.clazzToken).then(e=>{
					console.log(e);
				})
				
			},
			//根据学生id获取学的课程
			getCourseByStudentId()
			{
				HttpManagerStudent.getCourseByStudentId().then(e=>{
					console.log(e);
					this.ClazzList=e.data.data.map(item =>{
						return {
							...item,
							techareList:''
						}
					});

					for(let i=0;i<this.ClazzList.length;i++)
					{
						this.getTeachersNameByCourseId(this.ClazzList[i].id);
					}
				})
			},
			//根据课程id获取授课教师姓名
			getTeachersNameByCourseId(id) {
				var parmas = {
					courseId:id
				}
				HttpManagerStudent.getTeachersNameByCourseId(parmas).then(e => {
					const current = this.ClazzList.find(i=>i.id == id);
					current.techareList = e.data.data.join(',');

				})
				
			},
			handleClose()
			{
				this.dialogVisible=false;
			},
			
		},
		created()
		{
			this.getCourseByStudentId();
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.course_main {
		width: 86%;
		margin-left: 7%;
	}

	.input {
		margin-top: 1.25rem;
	}
	

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		// margin-top: 1.25rem;
		margin-bottom: 20px;
		// margin-left: 0.625rem;
		overflow: hidden;
		// background-color: white;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;
			margin-right: 1.25rem;
			margin-top: 1.25rem;
			margin-by: 1.25rem;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #03d3bd;
				}

				&:focus {
					border-color: #03d3bd;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;


				&:hover {
					cursor: pointer;
					color: #03d3bd;
				}
			}
		}
	}

	.grid-content {
		width: 98%;
		height: 273px;
		display: flex;
		cursor: pointer;
		flex-direction: column;
		border-radius: 8px;
		margin-left: 1%;
		margin-right: 1%;
		margin-top: 1.25rem;
	}

	.live-course-thumb img {
		width: 100%;
		height: 100%;
		border-radius: 8px 8px 0 0;
		transition: all .5s;
	}

	.live-course-thumb {
		width: 100%;
		height: 198px;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
	}

	.live-course-body {
		box-sizing: border-box;
		width: 100%;
		height: 75px;
		background-color: #fff;
		border-radius: 0 0 8px 8px;
		padding: 15px 15px 15px 10px;
	}

	.live-course-title {
		width: 100%;
		height: 16px;
		float: left;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		line-height: 16px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 9px;
	}

	.live-course-info {
		width: 100%;
		height: 20px;
		float: left;
		display: flex;
		align-items: center;
		color: #cfcfcf;
	}

	.box {
		// width: 100%;
		height: 100%;
		display: flex;
		// flex-direction: row;
	}

	.box .label {
		width: 42px;
		height: 14px;
		font-size: 14px;
		font-weight: 400;
		color: #ffffff;
		line-height: 14px;
		margin-right: 30px;
		margin-top: 10px;
	}

	.box .item-box {
		width: 1068px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		flex-direction: row;
	}

	.box .item-box .item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20px;
		font-size: 14px;
		font-weight: 400;
		color: #383838;
		line-height: 14px;
		padding: 10px 15px;
		cursor: pointer;
		margin-bottom: 10px;
	}
	.box .item-box .active{
		background-color: rgba(165, 165, 165, 0.9);
		border-radius: 4px;
	    color: white;
	}
</style>
